<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>07_事件处理</title>
</head>
<body>
<!--
1. 绑定监听:
  v-on:xxx="fun"
  @xxx="fun"
  @xxx="fun(参数)"
  默认事件形参: event
  隐含属性对象: $event
2. 事件修饰符:
  .prevent: 阻止事件的默认行为 event.preventDefault()
  .stop: 停止事件冒泡 event.stopPropagation()
  .once: 事件只响应一次
3. 按键修饰符
  .keycode: 操作的是某个keycode值的健
  .enter: 操作的是enter键
-->

<div id="example">

  <h2>1. 绑定监听</h2>
  <button @click="test1">TEST1111</button>
  <button @click="test2('atguigu')">TEST22222</button>
  <button @click="test3('atguigu2', $event)">TEST33333</button>
  <!-- 
    本质: <button @click="($event) => {test3('atguigu2', $event)}}">TEST33333</button>
   -->

  <h2>2. 事件修饰符</h2>
  <!-- 
    阻止事件默认行为
    停止事件冒泡
    只响应一次
  -->
  <a href="http://www.atguigu.com" @click.prevent="test4">去学习</a>

  <div style="width: 200px;height: 200px;background: blue;" @click="test5">
    <div style="width: 100px;height: 100px;background: green;" @click.stop="test6"></div>
  </div>

  <button @click.once="test7">只响应一次点击</button>


  <h2>3. 按键修饰符</h2>
  <input v-model="msg" type="text" @keyup.enter="test8"/>
  <input v-model="msg" type="text" @keyup.13="test8"/>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    data () {
      return {
        msg: 'xxxx'
      }
    },

    methods: {
      test1 (event) {
        alert(event.target.innerHTML)
      },

      test2 (content) {
        alert(content)
      },

      test3 (content, event) {
        console.log(event.target.innerHTML)
        alert(content)
      },

      test4 (event) {
        alert('点击了链接')
      },

      test5 () {
        alert('外面响应')
      },

      test6 () {
        alert('里面响应')
      },

      test7 () {
        alert('响应点击')
      },

      test8 (event) {
        // if (event.keyCode!==13) return
        alert(this.msg)
      }
    }
  }).$mount('#example')
</script>
</body>
</html>